<template>
<el-dropdown split-button trigger="click" @command="handleCommand">
    <span class="el-dropdown-link">
      {{ selectedSchool.name || '请选择学校' }}
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
              v-for="(school, index) in schools"
              :key="index"
              :command="school"
          >
            <img :src="school.schoolBadge" alt="" class="school-icon" />
            {{ school.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
</template>

<script>
import {onMounted, ref} from 'vue';
import { schoolListService } from '@/api/admin/school.js'

export default {
  setup() {
    // 定义学校列表
    const schools = ref([]);

    // 定义选中的学校
    const selectedSchool = ref({});

    // 处理命令事件，更新选中的学校
    const handleCommand = (command) => {
      selectedSchool.value = command;
    };

    const initSchools = async () => {
      const result = await schoolListService();
      schools.value = result.data;
    };
    onMounted(initSchools);
    return {
      schools,
      selectedSchool,
      handleCommand
    };
  },

};
</script>

<style scoped>

.school-icon {
  width: 16px; /* 根据需要调整图片大小 */
  height: 16px;
  margin-right: 8px; /* 图片与文字之间的间距 */
}
</style>
